<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5-2022-10-27-lidare.css">
</head>

<body>
    <div class="box">
        <div class="box-title">新冠肺炎疫情</div>
        <div class="all">
            <div class="nav">
                <div class="nav-item">国内疫情</div>
                <div class="nav-item">国外疫情</div>
                <div class="nav-item">全球疫情</div>
                <div class="mask"></div>
            </div>
            <div class="all-content">

            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        jQuery(function () {
            function getData(url, what) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    jQuery(".all-content").html("");
                    if (this.status == 200 && this.readyState == 4) {
                        console.log(JSON.parse(this.responseText));
                        data = JSON.parse(this.responseText).newslist[0].desc;
                        var check = true;
                        if (what == "国外疫情") {
                            data = data.foreignStatistics;
                        } else if (what == "全球疫情") {
                            data = data.globalStatistics;
                            check = false;
                        }
                        jQuery(`
                        <div class="all-content-detail">
                            <div class="detail-item">
                                <div>新增本土</div>
                                <div class="number">${data.currentConfirmedIncr ? data.currentConfirmedIncr > 0 ? "+" + data.currentConfirmedIncr : data.currentConfirmedIncr : "暂无数据"}</div>
                            </div>
                            <div class="detail-item">
                                <div>新增本土无症状</div>
                                <div class="number">${data.seriousIncr ? data.seriousIncr : "暂无数据"}</div>
                            </div>
                            <div style="display:${check ? "block" : "none"}" class="detail-item">
                                <div>新增境外</div>
                                <div class="number">${data.suspectedIncr ? data.suspectedIncr > 0 ? "+" + data.suspectedIncr : data.suspectedIncr : "暂无数据"}</div>
                            </div>
                            <div class="detail-item">
                                <div>港澳台新增</div>
                                <div class="number">暂无收集数据</div>
                            </div>
                            <div class="detail-item">
                                <div>现有本土</div>
                                <div class="number">${data.currentConfirmedCount ? data.currentConfirmedCount : "暂无数据"}</div>
                            </div>
                            <div class="detail-item">
                                <div>现有本土无症状</div>
                                <div class="number">${data.seriousCount ? data.seriousCount : "暂无数据"}</div>
                            </div>
                            <div style="display:${check ? "block" : "none"}" class="detail-item">
                                <div>现有境外</div>
                                <div class="number">暂无收集数据</div>
                            </div>
                            <div class="detail-item">
                                <div>现有确诊</div>
                                <div class="number">${data.currentConfirmedCount ? data.currentConfirmedCount : "暂无数据"}</div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="content-footer">
                            <div class="cf-item">
                                <div>累计确诊</div>
                                <div class="number">${data.confirmedCount ? data.confirmedCount : "暂无数据"}</div>
                                <div class="number">较昨日${data.yesterdayConfirmedCountIncr ? data.yesterdayConfirmedCountIncr > 0 ? "+" + data.yesterdayConfirmedCountIncr : data.yesterdayConfirmedCountIncr : "暂无数据"}</div>
                            </div>
                            <div style="display:${check ? "block" : "none"}" class="cf-item">
                                <div>累计境外</div>
                                <div class="number">${data.suspectedCount ? data.suspectedCount : "暂无数据"}</div>
                                <div class="number">较昨日${data.yesterdaySuspectedCountIncr ? data.yesterdaySuspectedCountIncr > 0 ? "+" + data.yesterdaySuspectedCountIncr : data.yesterdaySuspectedCountIncr : "暂无数据"}</div>
                            </div>
                            <div class="cf-item">
                                <div>累计治愈</div>
                                <div class="number green">${data.curedCount ? data.curedCount : "暂无数据"}</div>
                                <div class="number green">较昨日${data.curedIncr ? data.curedIncr > 0 ? "+" + data.curedIncr : data.curedIncr : "暂无数据"}</div>
                            </div>
                            <div class="cf-item">
                                <div>累计死亡</div>
                                <div class="number">${data.deadCount ? data.deadCount : "暂无数据"}</div>
                                <div class="number">较昨日${data.deadIncr ? data.deadIncr > 0 ? "+" + data.deadIncr : data.deadIncr : "暂无数据"}</div>
                            </div>
                        </div>`).prependTo(jQuery(".all-content"));
                        jQuery(".number").map(function (index, item) {
                            var num = item.textContent.match(/[0-9]+/g);
                            if (num && num > 0) {
                                jQuery(item).css({
                                    color: "red"
                                });
                            }
                        });
                        jQuery(".green").css({
                            color: "#10aeb5"
                        });
                        var width = !check ? "33%" : "25%";
                        jQuery(".detail-item").css({ width });
                        jQuery(".cf-item").css({ width });
                    }
                }
                xhr.open("get", url, true);
                xhr.send();
            }
            var data = {};
            var key = "ed7404f6f4d01b7b3f4432e45eca3a81";
            var intercept = false;
            jQuery(".nav-item").on({
                click: function () {
                    if (intercept) return;
                    intercept = true;
                    setTimeout(function () {
                        intercept = false;
                    }, 1000)
                    jQuery(".mask").css({
                        left: (jQuery(this).width() - jQuery(".mask").width()) / 2 + jQuery(this).width() * jQuery(this).index()
                    });
                    getData("http://api.tianapi.com/ncov/index?key=" + key, this.textContent);
                }
            });
            jQuery(jQuery(".nav-item")[0]).click();
            setTimeout(function () {
                jQuery(".mask").css({
                    transition: "0.2s"
                });
            }, 0)
        })
    </script>
</body>

</html>